<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Betterlife Front UI</title>

    <link rel="stylesheet" href="../../css/common.min.css">
    <script type="text/javascript" src="../../js/common/base.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
      /*start: from docs.min.css: http://getbootstrap.com/assets/css/docs.min.css */
      /*
       * Side navigation
       *
       * Scrollspy and affixed enhanced navigation to highlight sections and secondary
       * sections of docs content.
       */

      /* By default it's not affixed in mobile views, so undo that */
      .bs-docs-sidebar.affix {
        position: static;
      }
      @media (min-width: 768px) {
        .bs-docs-sidebar {
          padding-left: 20px;
        }
      }

      /* First level of nav */
      .bs-docs-sidenav {
        margin-top: 20px;
        margin-bottom: 20px;
      }

      /* All levels of nav */
      .bs-docs-sidebar .nav > li > a {
        display: block;
        padding: 4px 20px;
        font-size: 13px;
        font-weight: 500;
        color: #767676;
      }
      .bs-docs-sidebar .nav > li > a:hover,
      .bs-docs-sidebar .nav > li > a:focus {
        padding-left: 19px;
        color: #563d7c;
        text-decoration: none;
        background-color: transparent;
        border-left: 1px solid #563d7c;
      }
      .bs-docs-sidebar .nav > .active > a,
      .bs-docs-sidebar .nav > .active:hover > a,
      .bs-docs-sidebar .nav > .active:focus > a {
        padding-left: 18px;
        font-weight: bold;
        color: #563d7c;
        background-color: transparent;
        border-left: 2px solid #563d7c;
      }

      /* Nav: second level (shown on .active) */
      .bs-docs-sidebar .nav .nav {
        display: none; /* Hide by default, but at >768px, show it */
        padding-bottom: 10px;
      }
      .bs-docs-sidebar .nav .nav > li > a {
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 30px;
        font-size: 12px;
        font-weight: normal;
      }
      .bs-docs-sidebar .nav .nav > li > a:hover,
      .bs-docs-sidebar .nav .nav > li > a:focus {
        padding-left: 29px;
      }
      .bs-docs-sidebar .nav .nav > .active > a,
      .bs-docs-sidebar .nav .nav > .active:hover > a,
      .bs-docs-sidebar .nav .nav > .active:focus > a {
        padding-left: 28px;
        font-weight: 500;
      }

      /* Back to top (hidden on mobile) */
      .back-to-top,
      .bs-docs-theme-toggle {
        display: none;
        padding: 4px 10px;
        margin-top: 10px;
        margin-left: 10px;
        font-size: 12px;
        font-weight: 500;
        color: #999;
      }
      .back-to-top:hover,
      .bs-docs-theme-toggle:hover {
        color: #563d7c;
        text-decoration: none;
      }
      .bs-docs-theme-toggle {
        margin-top: 0;
      }

      @media (min-width: 768px) {
        .back-to-top,
        .bs-docs-theme-toggle {
          display: block;
        }
      }

      /* Show and affix the side nav when space allows it */
      @media (min-width: 992px) {
        .bs-docs-sidebar .nav > .active > ul {
          display: block;
        }
        /* Widen the fixed sidebar */
        .bs-docs-sidebar.affix,
        .bs-docs-sidebar.affix-bottom {
          width: 213px;
        }
        .bs-docs-sidebar.affix {
          position: fixed; /* Undo the static from mobile first approach */
          top: 20px;
        }
        .bs-docs-sidebar.affix-bottom {
          position: absolute; /* Undo the static from mobile first approach */
        }
        .bs-docs-sidebar.affix-bottom .bs-docs-sidenav,
        .bs-docs-sidebar.affix .bs-docs-sidenav {
          margin-top: 0;
          margin-bottom: 0;
        }
      }
      @media (min-width: 1200px) {
        /* Widen the fixed sidebar again */
        .bs-docs-sidebar.affix-bottom,
        .bs-docs-sidebar.affix {
          width: 263px;
        }
      }

      /*
       * Docs sections
       *
       * Content blocks for each component or feature.
       */

      /* Space things out */
      .bs-docs-section {
        margin-bottom: 60px;
      }
      .bs-docs-section:last-child {
        margin-bottom: 0;
      }

      h1[id] {
        padding-top: 20px;
        margin-top: 0;
      }
      /*end  : from docs.min.css: http://getbootstrap.com/assets/css/docs.min.css */


      /*app css*/
      body{
        padding-top: 0;
      }
      .bs-docs-sidebar .nav>li>a,.back-to-top, .bs-docs-theme-toggle{
        font-size: 18px;
        text-align: left;
      }
      .navbar{
        margin-bottom: 0px;
        border-radius: 0px;
      }
      .highlight {
        padding: 0px 14px 9px 0px;
        margin-bottom: 14px;
        background-color: #f7f7f9;
        border: 1px solid #e1e1e8;
        border-radius: 4px;
      }
      .highlight pre {
        padding: 0;
        margin-top: -5px;
        margin-bottom: 0;
        word-break: normal;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
      }
      .highlight pre code {
        font-size: inherit;
        color: #333;
      }
      .highlight pre code:first-child {
        display: inline-block;
        padding-right: 45px;
      }
      nav#sidebar-right.affix{position:fixed;top:20px !important;}
      .affix-bottom{position:absolute;}

      .hll { background-color: #ffffcc }
       /*{ background: #f0f3f3; }*/
      .c { color: #999; } /* Comment */
      .err { color: #AA0000; background-color: #FFAAAA } /* Error */
      .k { color: #006699; } /* Keyword */
      .o { color: #555555 } /* Operator */
      .cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
      .cp { color: #009999 } /* Comment.Preproc */
      .c1 { color: #999; } /* Comment.Single */
      .cs { color: #999; } /* Comment.Special */
      .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
      .ge { font-style: italic } /* Generic.Emph */
      .gr { color: #FF0000 } /* Generic.Error */
      .gh { color: #003300; } /* Generic.Heading */
      .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
      .go { color: #AAAAAA } /* Generic.Output */
      .gp { color: #000099; } /* Generic.Prompt */
      .gs { } /* Generic.Strong */
      .gu { color: #003300; } /* Generic.Subheading */
      .gt { color: #99CC66 } /* Generic.Traceback */
      .kc { color: #006699; } /* Keyword.Constant */
      .kd { color: #006699; } /* Keyword.Declaration */
      .kn { color: #006699; } /* Keyword.Namespace */
      .kp { color: #006699 } /* Keyword.Pseudo */
      .kr { color: #006699; } /* Keyword.Reserved */
      .kt { color: #007788; } /* Keyword.Type */
      .m { color: #FF6600 } /* Literal.Number */
      .s { color: #d44950 } /* Literal.String */
      .na { color: #4f9fcf } /* Name.Attribute */
      .nb { color: #336666 } /* Name.Builtin */
      .nc { color: #00AA88; } /* Name.Class */
      .no { color: #336600 } /* Name.Constant */
      .nd { color: #9999FF } /* Name.Decorator */
      .ni { color: #999999; } /* Name.Entity */
      .ne { color: #CC0000; } /* Name.Exception */
      .nf { color: #CC00FF } /* Name.Function */
      .nl { color: #9999FF } /* Name.Label */
      .nn { color: #00CCFF; } /* Name.Namespace */
      .nt { color: #2f6f9f; } /* Name.Tag */
      .nv { color: #003333 } /* Name.Variable */
      .ow { color: #000000; } /* Operator.Word */
      .w { color: #bbbbbb } /* Text.Whitespace */
      .mf { color: #FF6600 } /* Literal.Number.Float */
      .mh { color: #FF6600 } /* Literal.Number.Hex */
      .mi { color: #FF6600 } /* Literal.Number.Integer */
      .mo { color: #FF6600 } /* Literal.Number.Oct */
      .sb { color: #CC3300 } /* Literal.String.Backtick */
      .sc { color: #CC3300 } /* Literal.String.Char */
      .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
      .s2 { color: #CC3300 } /* Literal.String.Double */
      .se { color: #CC3300; } /* Literal.String.Escape */
      .sh { color: #CC3300 } /* Literal.String.Heredoc */
      .si { color: #AA0000 } /* Literal.String.Interpol */
      .sx { color: #CC3300 } /* Literal.String.Other */
      .sr { color: #33AAAA } /* Literal.String.Regex */
      .s1 { color: #CC3300 } /* Literal.String.Single */
      .ss { color: #FFCC33 } /* Literal.String.Symbol */
      .bp { color: #336666 } /* Name.Builtin.Pseudo */
      .vc { color: #003333 } /* Name.Variable.Class */
      .vg { color: #003333 } /* Name.Variable.Global */
      .vi { color: #003333 } /* Name.Variable.Instance */
      .il { color: #FF6600 } /* Literal.Number.Integer.Long */

      .css .o,
      .css .o + .nt,
      .css .nt + .nt { color: #999; }

    </style>
</head>
<body>
    <!--nav begin-->
    <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" id="btn-toggle-navbar" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <button type="button" class="navbar-toggle collapsed" id="btn-toggle-sidebar" data-toggle="collapse" data-target="#sidebar" aria-expanded="false" aria-controls="sidebar">
        <span class="sr-only"></span>
        <i class="glyphicon glyphicon-briefcase"></i>
      </button>
      <button type="button" class="navbar-toggle collapsed" id="btn-toggle-searchbar" data-toggle="collapse" data-target="#searchbar" aria-expanded="false" aria-controls="searchbar">
        <span class="sr-only"></span>
        <i class="fa fa-search"></i>
      </button>
      <a class="navbar-brand" href="/">
        <img src="../../images/logo.png" /> <span>Betterlife Front UI</span>
      </a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../../">首页</a></li>
        <li><a href="../../html/blog/index.html">博客</a></li>
        <li><a href="../../html/featured/index.html">发现</a></li>
        <li><a href="../../html/us/index.html">我们</a></li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            其它
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" aria-labelledby="dLabel">
            <li><a href="http://www.iqiyi.com/" target="_blank">电影</a></li>
            <li><a href="https://y.qq.com/" target="_blank">音乐</a></li>
            <li><a href="http://36kr.com/" target="_blank">研发</a></li>
            <li><a href="https://www.jd.com/" target="_blank">购物</a></li>
            <li><a href="../../html/model/preview.html">话题</a></li>
            <li><a href="https://www.pengfu.com/" target="_blank">幽默</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="fa fa-user"></span>
            <span class="username">skygreen</span>
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" aria-labelledby="dLabel">
            <li><a href="../../html/home.html"><span class="glyphicon glyphicon-edit"></span>后台管理</a></li>
            <li><a href="#reset"><span class="glyphicon glyphicon-edit"></span>修改密码</a></li>
            <li><a href="../../login.html"><span class="glyphicon glyphicon-off"></span>退出</a></li>
          </ul>
        </li>
        <li id="searchbar-li" class="search-toggle collapsed" data-toggle="collapse" data-target="#searchbar" aria-expanded="false" aria-controls="searchbar">
          <a>
            <span><span class="menu-search-text">搜索</span><span class="fa fa-search" aria-hidden="true"></span></span>
          </a>
        </li>
        <li><a id="btn-layout-small"><i class="glyphicon glyphicon-resize-small"></i></a></li>
      </ul>
    </div>
  </div>
  <div id="searchbar" class="collapse">
    <div id="searchbar-inner">
      <form method="get" action="" class="searchbar-form">
        <input id="t-search" type="search" class="form-control" name="search" autocomplete="off" autofocus="autofocus" placeholder="搜你所想">
        <i id="searchbar-close" class="fa fa-remove search-toggle"></i>
      </form>
    </div>
  </div>
</nav>

    <!--nav end-->

    <!--content begin-->
    <div id="view_top" class="container bs-docs-container">
        <div class="row">
            <div class="col-md-9" role="main">
              <div class="bs-docs-section">
                <h1 class="page-header" id="home">Betterlife Front UI</h1>
                <p class=lead>Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
                <div class="row bs-downloads">
                  <div class=col-sm-4>
                    <h3 id=download-bootstrap>Bootstrap</h3>
                    <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
                    <p>
                      <a href=https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download compiled")'>Download Bootstrap</a></p>
                  </div>
                  <div class=col-sm-4>
                    <h3 id=download-source>Source code</h3>
                    <p>Source Less, JavaScript, and font files, along with our docs.
                      <strong>Requires a Less compiler and
                        <a href=#grunt>some setup.</a></strong>
                    </p>
                    <p>
                      <a href=https://github.com/twbs/bootstrap/archive/v3.3.7.zip class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download source")'>Download source</a></p>
                  </div>
                  <div class=col-sm-4>
                    <h3 id=download-sass>Sass</h3>
                    <p>
                      <a href=https://github.com/twbs/bootstrap-sass>Bootstrap ported from Less to Sass</a>for easy inclusion in Rails, Compass, or Sass-only projects.</p>
                    <p>
                      <a href=https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz class="btn btn-lg btn-outline" onclick='ga("send","event","Getting started","Download","Download Sass")'>Download Sass</a></p>
                  </div>
                </div>
                <h2 id=download-cdn>Bootstrap CDN</h2>
                <p>The folks over at
                  <a href=https://www.maxcdn.com/>MaxCDN</a>graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these
                  <a href=https://www.bootstrapcdn.com/>Bootstrap CDN</a>links.</p>
                <figure class=highlight>
                  <pre>
                    <code class=language-html data-lang=html>
                      <span class=c>&lt;!-- Latest compiled and minified CSS --&gt;</span>
                      <span class=nt>&lt;link</span> <span class=na>rel=</span>
                      <span class=s>"stylesheet"</span>
                      <span class=na>href=</span>
                      <span class=s>"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span>
                      <span class=na>integrity=</span>
                      <span class=s>"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"</span>
                      <span class=na>crossorigin=</span>
                      <span class=s>"anonymous"</span>
                      <span class=nt>&gt;</span>
                      <span class=c>&lt;!-- Optional theme --&gt;</span>
                      <span class=nt>&lt;link</span>
                      <span class=na>rel=</span>
                      <span class=s>"stylesheet"</span>
                      <span class=na>href=</span>
                      <span class=s>"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"</span>
                      <span class=na>integrity=</span>
                      <span class=s>"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"</span>
                      <span class=na>crossorigin=</span>
                      <span class=s>"anonymous"</span>
                      <span class=nt>&gt;</span>
                      <span class=c>&lt;!-- Latest compiled and minified JavaScript --&gt;</span>
                      <span class=nt>&lt;script</span>
                      <span class=na>src=</span>
                      <span class=s>"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span>
                      <span class=na>integrity=</span>
                      <span class=s>"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"</span>
                      <span class=na>crossorigin=</span>
                      <span class=s>"anonymous"</span>
                      <span class=nt>&gt;&lt;/script&gt;</span></code>
                  </pre>
                </figure>
                <h2 id=download-bower>Install with Bower</h2>
                <p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using
                  <a href=http://bower.io>Bower</a>:</p>
                <figure class=highlight>
                  <pre>
                    <code class=language-bash data-lang=bash>
                      <span class=gp>$</span>bower install bootstrap</code></pre>
                </figure>
                <h2 id=download-npm>Install with npm</h2>
                <p>You can also install Bootstrap using
                  <a href=https://www.npmjs.com>npm</a>:</p>
                <figure class=highlight>
                  <pre>
                    <code class=language-bash data-lang=bash>
                      <span class=gp>$</span>npm install bootstrap@3</code></pre>
                </figure>
                <p>
                  <code>require('bootstrap')</code>will load all of Bootstrap's jQuery plugins onto the jQuery object. The
                  <code>bootstrap</code>module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the
                  <code>/js/*.js</code>files under the package's top-level directory.</p>
                <p>Bootstrap's
                  <code>package.json</code>contains some additional metadata under the following keys:</p>
                <ul>
                  <li>
                    <code>less</code>- path to Bootstrap's main
                    <a href=http://lesscss.org>Less</a>source file</li>
                  <li>
                    <code>style</code>- path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)</li></ul>
                <h2 id=download-composer>Install with Composer</h2>
                <p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using
                  <a href=https://getcomposer.org>Composer</a>:</p>
                <figure class=highlight>
                  <pre>
                    <code class=language-bash data-lang=bash>
                      <span class=gp>$</span>composer require twbs/bootstrap</code></pre>
                </figure>
                <h2 id=download-autoprefixer>Autoprefixer required for Less/Sass</h2>
                <p>Bootstrap uses
                  <a href=https://github.com/postcss/autoprefixer>Autoprefixer</a>to deal with
                  <a href=http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm>CSS vendor prefixes</a>. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.</p></div>
              <div class=bs-docs-section>
                <h1 class=page-header id=whats-included>What's included</h1>
                <p class=lead>Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
                <div class="bs-callout bs-callout-warning" id=jquery-required>
                  <h4>jQuery required</h4>
                  <p>Please note that
                    <strong>all JavaScript plugins require jQuery</strong>to be included, as shown in the
                    <a href=#template>starter template</a>.
                    <a href=https://github.com/twbs/bootstrap/blob/v3.3.7/bower.json>Consult our
                      <code>bower.json</code></a>to see which versions of jQuery are supported.</p>
                </div>
                <h2 id=whats-included-precompiled>Precompiled Bootstrap</h2>
                <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
                <figure class=highlight>
                  <pre>
                    <code class=language-bash data-lang=bash>
                    bootstrap/
                    ├── css/
                    │   ├── bootstrap.css
                    │   ├── bootstrap.css.map
                    │   ├── bootstrap.min.css
                    │   ├── bootstrap.min.css.map
                    │   ├── bootstrap-theme.css
                    │   ├── bootstrap-theme.css.map
                    │   ├── bootstrap-theme.min.css
                    │   └── bootstrap-theme.min.css.map
                    ├── js/
                    │   ├── bootstrap.js
                    │   └── bootstrap.min.js
                    └── fonts/
                        ├── glyphicons-halflings-regular.eot
                        ├── glyphicons-halflings-regular.svg
                        ├── glyphicons-halflings-regular.ttf
                        ├── glyphicons-halflings-regular.woff
                        └── glyphicons-halflings-regular.woff2
                  </code></pre>
                </figure>
                <p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (
                  <code>bootstrap.*</code>), as well as compiled and minified CSS and JS (
                  <code>bootstrap.min.*</code>). CSS
                  <a href=https://developer.chrome.com/devtools/docs/css-preprocessors>source maps</a>(
                  <code>bootstrap.*.map</code>) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
                <h2 id=whats-included-source>Bootstrap source code</h2>
                <p>The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more:</p>
                <figure class=highlight>
                  <pre>
                    <code class=language-bash data-lang=bash>bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/</code></pre>
                </figure>
                <p>The
                  <code>less/</code>,
                  <code>js/</code>, and
                  <code>fonts/</code>are the source code for our CSS, JS, and icon fonts (respectively). The
                  <code>dist/</code>folder includes everything listed in the precompiled download section above. The
                  <code>docs/</code>folder includes the source code for our documentation, and
                  <code>examples/</code>of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.</p></div>
              <div class=bs-docs-section>
                <h1 class=page-header id=grunt>Compiling CSS and JavaScript</h1>
                <p class=lead>Bootstrap uses
                  <a href=http://gruntjs.com>Grunt</a>for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p>
                <h2 id=grunt-installing>Installing Grunt</h2>
                <p>To install Grunt, you must
                  <strong>first
                    <a href=https://nodejs.org/download/>download and install node.js</a></strong>(which includes npm). npm stands for
                  <a href=https://www.npmjs.com/>node packaged modules</a>and is a way to manage development dependencies through node.js.</p>Then, from the command line:
                <ol>
                  <li>Install
                    <code>grunt-cli</code>globally with
                    <code>npm install -g grunt-cli</code>.</li>
                  <li>Navigate to the root
                    <code>/bootstrap/</code>directory, then run
                    <code>npm install</code>. npm will look at the
                    <a href=https://github.com/twbs/bootstrap/blob/master/package.json>
                      <code>package.json</code></a>file and automatically install the necessary local dependencies listed there.</li>
                </ol>
                <p>When completed, you'll be able to run the various Grunt commands provided from the command line.</p>
                <h2 id=grunt-commands>Available Grunt commands</h2>
                <h3>
                  <code>grunt dist</code>(Just compile CSS and JavaScript)</h3>
                <p>Regenerates the
                  <code>/dist/</code>directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.</p>
                <h3>
                  <code>grunt watch</code>(Watch)</h3>
                <p>Watches the Less source files and automatically recompiles them to CSS whenever you save a change.</p>
                <h3>
                  <code>grunt test</code>(Run tests)</h3>
                <p>Runs
                  <a href=http://jshint.com>JSHint</a>and runs the
                  <a href=http://qunitjs.com>QUnit</a>tests headlessly in
                  <a href=http://phantomjs.org>PhantomJS</a>.</p>
                <h3>
                  <code>grunt docs</code>(Build &amp; test the docs assets)</h3>
                <p>Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via
                  <code>bundle exec jekyll serve</code>.</p>
                <h3>
                  <code>grunt</code>(Build absolutely everything and run tests)</h3>
                <p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires
                  <a href=http://jekyllrb.com/docs/installation/>Jekyll</a>. Usually only necessary if you're hacking on Bootstrap itself.</p>
                <h2 id=grunt-troubleshooting>Troubleshooting</h2>
                <p>Should you encounter problems with installing dependencies or running Grunt commands, first delete the
                  <code>/node_modules/</code>directory generated by npm. Then, rerun
                  <code>npm install</code>.</p></div>
              <div class=bs-docs-section>
                <h1 class=page-header id=template>Basic template</h1>
                <p class=lead>Start with this basic HTML template, or modify
                  <a href=#examples>these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>
                <p>Copy the HTML below to begin working with a minimal Bootstrap document.</p>
                <figure class=highlight>
                  <pre>
                    <code class=language-html data-lang=html>
                      <span class=cp>&lt;!DOCTYPE html&gt;</span>
                      <span class=nt>&lt;html</span>
                      <span class=na>lang=</span>
                      <span class=s>"en"</span>
                      <span class=nt>&gt;</span>
                      <span class=nt>&lt;head&gt;</span>
                      <span class=nt>&lt;meta</span>
                      <span class=na>charset=</span>
                      <span class=s>"utf-8"</span>
                      <span class=nt>&gt;</span>
                      <span class=nt>&lt;meta</span>
                      <span class=na>http-equiv=</span>
                      <span class=s>"X-UA-Compatible"</span>
                      <span class=na>content=</span>
                      <span class=s>"IE=edge"</span>
                      <span class=nt>&gt;</span>
                      <span class=nt>&lt;meta</span>
                      <span class=na>name=</span>
                      <span class=s>"viewport"</span>
                      <span class=na>content=</span>
                      <span class=s>"width=device-width, initial-scale=1"</span>
                      <span class=nt>&gt;</span>
                      <span class=c>&lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;</span>
                      <span class=nt>&lt;title&gt;</span>Bootstrap 101 Template
                      <span class=nt>&lt;/title&gt;</span>
                      <span class=c>&lt;!-- Bootstrap --&gt;</span>
                      <span class=nt>&lt;link</span>
                      <span class=na>href=</span>
                      <span class=s>"css/bootstrap.min.css"</span>
                      <span class=na>rel=</span>
                      <span class=s>"stylesheet"</span>
                      <span class=nt>&gt;</span>
                      <span class=c>&lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;</span>
                      <span class=c>&lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;</span>
                      <span class=c>&lt;!--[if lt IE 9]&gt; &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt; &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt; &lt;![endif]--&gt;</span>
                      <span class=nt>&lt;/head&gt;</span>
                      <span class=nt>&lt;body&gt;</span>
                      <span class=nt>&lt;h1&gt;</span>Hello, world!
                      <span class=nt>&lt;/h1&gt;</span>
                      <span class=c>&lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;</span>
                      <span class=nt>&lt;script</span>
                      <span class=na>src=</span>
                      <span class=s>"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"</span>
                      <span class=nt>&gt;&lt;/script&gt;</span>
                      <span class=c>&lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;</span>
                      <span class=nt>&lt;script</span>
                      <span class=na>src=</span>
                      <span class=s>"js/bootstrap.min.js"</span>
                      <span class=nt>&gt;&lt;/script&gt;</span>
                      <span class=nt>&lt;/body&gt;</span>
                      <span class=nt>&lt;/html&gt;</span></code>
                  </pre>
                </figure>
              </div>
              <div class=bs-docs-section>
                <h1 class=page-header id=examples>Examples</h1>
                <p class=lead>Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.</p>
                <p>Get the source code for every example below by
                  <a href=https://github.com/twbs/bootstrap/archive/v3.3.7.zip>downloading the Bootstrap repository</a>. Examples can be found in the
                  <code>docs/examples/</code>directory.</p>
                <h2 id=examples-framework>Using the framework</h2>
                <div class="row bs-examples">
                  <div class="col-xs-6 col-md-4">
                                        <h3>Starter template</h3>
                    <p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
                  </div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Bootstrap theme</h3>
                    <p>Load the optional Bootstrap theme for a visually enhanced experience.</p>
                  </div>
                  <div class="clearfix visible-xs"></div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Grids</h3>
                    <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
                  </div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Jumbotron</h3>
                    <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
                  </div>
                  <div class="clearfix visible-xs"></div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Narrow jumbotron</h3>
                    <p>Build a more custom page by narrowing the default container and jumbotron.</p>
                  </div>
                </div>
                <h2 id=examples-navbars>Navbars in action</h2>
                <div class="row bs-examples">
                  <div class="col-xs-6 col-md-4">

                    <h3>Navbar</h3>
                    <p>Super basic template that includes the navbar along with some additional content.</p>
                  </div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Static top navbar</h3>
                    <p>Super basic template with a static top navbar along with some additional content.</p>
                  </div>
                  <div class="clearfix visible-xs"></div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Fixed navbar</h3>
                    <p>Super basic template with a fixed top navbar along with some additional content.</p>
                  </div>
                </div>
                <h2 id=examples-custom>Custom components</h2>
                <div class="row bs-examples">
                  <div class="col-xs-6 col-md-4">

                    <h3>Cover</h3>
                    <p>A one-page template for building simple and beautiful home pages.</p>
                  </div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Carousel</h3>
                    <p>Customize the navbar and carousel, then add some new components.</p>
                  </div>
                  <div class="clearfix visible-xs"></div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Blog</h3>
                    <p>Simple two-column blog layout with custom navigation, header, and type.</p>
                  </div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Dashboard</h3>
                    <p>Basic structure for an admin dashboard with fixed sidebar and navbar.</p>
                  </div>
                  <div class="clearfix visible-xs"></div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Sign-in page</h3>
                    <p>Custom form layout and design for a simple sign in form.</p>
                  </div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Justified nav</h3>
                    <p>Create a custom navbar with justified links. Heads up!
                      <a href=../components/#nav-justified>Not too Safari friendly.</a></p>
                  </div>
                  <div class="clearfix visible-xs"></div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Sticky footer</h3>
                    <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
                  </div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Sticky footer with navbar</h3>
                    <p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p>
                  </div>
                </div>
                <h2 id=examples-experiments>Experiments</h2>
                <div class="row bs-examples">
                  <div class="col-xs-6 col-md-4">

                    <h3>Non-responsive Bootstrap</h3>
                    <p>Easily disable the responsiveness of Bootstrap
                      <a href=#disable-responsive>per our docs</a>.</p></div>
                  <div class="col-xs-6 col-md-4">

                    <h3>Off-canvas</h3>
                    <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
                  </div>
                </div>
              </div>
              <div class=bs-docs-section>
                <h1 class=page-header id=tools>Tools</h1>
                <h2 id=tools-bootlint>Bootlint</h2>
                <p>
                  <strong>
                    <a href=https://github.com/twbs/bootlint>Bootlint</a></strong>is the official Bootstrap HTML
                  <a href=http://en.wikipedia.org/wiki/Lint_(software)>linter</a>tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p></div>
              <div class=bs-docs-section>
                <h1 class=page-header id=community>Community</h1>
                <p class=lead>Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
                <ul>
                  <li>Read and subscribe to
                    <a href=http://blog.getbootstrap.com/>The Official Bootstrap Blog</a>.</li>
                  <li>Chat with fellow Bootstrappers using IRC in the
                    <code>irc.freenode.net</code>server, in the
                    <a href=irc://irc.freenode.net/%23bootstrap>##bootstrap channel</a>.</li>
                  <li>For help using Bootstrap, ask on
                    <a href=https://stackoverflow.com/questions/tagged/twitter-bootstrap-3>StackOverflow using the tag
                      <code>twitter-bootstrap-3</code></a>.</li>
                  <li>Developers should use the keyword
                    <code>bootstrap</code>on packages which modify or add to the functionality of Bootstrap when distributing through
                    <a href=https://www.npmjs.com/browse/keyword/bootstrap>npm</a>or similar delivery mechanisms for maximum discoverability.</li>
                  <li>Find inspiring examples of people building with Bootstrap at the
                    <a href=http://expo.getbootstrap.com>Bootstrap Expo</a>.</li></ul>
                <p>You can also follow
                  <a href=https://twitter.com/getbootstrap>@getbootstrap on Twitter</a>for the latest gossip and awesome music videos.</p>
              </div>
            </div>

            <div class="col-md-3" role="complementary">
              <nav id="sidebar-right" class="bs-docs-sidebar hidden-print hidden-sm hidden-xs">
                <ul class="nav bs-docs-sidenav">
                  <li>
                    <a href=#home>读书</a></li>
                  <li>
                    <a href=#whats-included>电影</a>
                    <ul class=nav>
                      <li>
                        <a href=#whats-included-precompiled>Precompiled</a></li>
                      <li>
                        <a href=#whats-included-source>Source code</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href=#grunt>音乐</a>
                    <ul class=nav>
                      <li>
                        <a href=#grunt-installing>Installing Grunt</a></li>
                      <li>
                        <a href=#grunt-commands>Available Grunt commands</a></li>
                      <li>
                        <a href=#grunt-troubleshooting>Troubleshooting</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href=#template>研发</a></li>
                  <li>
                    <a href=#examples>购物</a>
                    <ul class=nav>
                      <li>
                        <a href=#examples-framework>Using the framework</a></li>
                      <li>
                        <a href=#examples-navbars>Navbars in action</a></li>
                      <li>
                        <a href=#examples-custom>Custom components</a></li>
                      <li>
                        <a href=#examples-experiments>Experiments</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href=#tools>话题</a>
                    <ul class=nav>
                      <li>
                        <a href=#tools-bootlint>Bootlint</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href=#community>幽默</a>
                  </li>
                </ul>
                <a href="#view_top" class="back-to-top">返回顶部</a></nav>
            </div>
        </div>
    </div>
    <!--content end-->

    <!--footer begin-->
    
    <footer class="text-muted">
        <div id="footer-inner" class="container clr">
            <div id="copyright" class="clr" role="contentinfo">
                © 2017-2020 Betterlife - All Rights Reserved.&nbsp;
                <div id="link" class="clr" role="linkinfo"><a title="License" href="https://github.com/skygreen2001/betterlife.front/blob/master/LICENSE" target="_blank">License</a>&nbsp;| <a title="Help" href="https://github.com/skygreen2001/betterlife.front" target="_blank">Help</a></div>
            </div>
        </div>
    </footer>

    <div class="return-top">
        <span class="icon-stack fa-3x">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-minus fa-inverse fa-stack-1x up"></i>
          <i class="fa fa-arrow-up fa-inverse fa-stack-1x down"></i>
        </span>
    </div>

    <script type="text/javascript" src="../../js/common/bower/bower.min.js"></script>
    <script type="text/javascript" src="../../js/normal/common.js"></script>
    <script type="text/javascript" src="../../js/normal/layout.js"></script>

    <!--footer end-->
    <script type="text/javascript">
    $(function(){
      //内容来自: FE-learning
      //         https://github.com/qiu-deqing/FE-learning

      $("figure > pre > code").each(function(){
        var html = $(this).html().replace(/    /gi, '');
        $(this).html(html);
      });

      $("nav").removeClass('navbar-fixed-top');

      // Twitter bootstrap 的 affix.js 插件: https://www.zfanw.com/blog/twitter-bootstrap-affix-js.html
      $('nav#sidebar-right').affix({
        offset: {
          top: 20
        }
      });

      $("body").scrollspy({
        target: "nav#sidebar-right"
      });
    });

    </script>

</body>
</html>
